<template>
  <Card>
    <p slot="title">
      <Icon type="person"></Icon>
      个人信息
    </p>


    <div class="body">
      <div class="setting-head" align="center">
        <img class="headImg" :src="selfForm.headImg"/>

        <my-upload @onSuccess="uploadSuccess"></my-upload>

      </div>

      <Form :model="selfForm" :label-width="80" ref="selfForm" :rules="ruleValidate">

        <FormItem label="昵称" prop="name">
          <Input type="text" v-model="selfForm.name" placeholder="输入昵称"/>
        </FormItem>

        <FormItem label="修改密码">
          <i-switch v-model="selfForm.switch" size="large" @on-change="switchChange">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>

        <FormItem label="原密码" required v-if="showSettingPwd">
          <Input type="password" v-model="selfForm.oldPwd" placeholder="原密码"/>
        </FormItem>

        <FormItem label="新密码" required v-if="showSettingPwd">
          <Input type="password" v-model="selfForm.newPwd" placeholder="新密码"/>
        </FormItem>

        <FormItem>
          <Button type="primary" @click="handleSubmit('selfForm')">更新</Button>
          <Button type="ghost" @click="handleReset('selfForm')" style="margin-left: 8px">重置</Button>
        </FormItem>
      </Form>
    </div>


  </Card>
</template>

<script>
  import MyUpload from '@/components/public/custom/ImgUpload.vue';

  export default {
    name: "Self",
    components: {
      MyUpload
    },
    data() {
      return {
        showSettingPwd: false,  //控制是否显示 修改密码的输入框
        selfForm: {
          name: '',
          oldPwd: '',
          newPwd: '',
          switch: '',
          headImg: ''
        },
        ruleValidate: {
          name: [
            {required: true, message: '姓名不能为空', trigger: 'blur'},
            {type: 'string', min: 1, max: 10, message: '昵称最多10个字符最少1个', trigger: 'blur'}
          ]
        }
      }
    },
    mounted() {
      this.$emit('selectMenu', '1-2');
    },
    created() {
      this.axios.post(this.baseUrl + '/get-admin')
        .then(res => {
          let data = res.data;
          if (data.code != 0) {
            let dt = data.data;
            this.selfForm.name = dt.name;
            this.selfForm.headImg = dt.mainimg;
          } else {
            this.$Message.error(data.msg);
          }
        }).catch(error => {
        this.$Message.error(error);
      })
    },
    methods: {
      handleSubmit(name) {
        let _self = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (_self.showSettingPwd == true) {
              if (_self.selfForm.oldPwd.length != 0 && _self.selfForm.newPwd.length != 0) {
                //这步修改密码的操作
                this.http.post('/update-admin-pwd', {
                  oldPwd: this.selfForm.oldPwd,
                  newPwd: this.selfForm.newPwd
                }, data => {
                  this.$Message.success('更新成功!');
                }, error => {
                  this.$Message.error(error);
                })
              } else {
                this.$Message.error('请检查您的输入');
              }
            } else {
              //这一步是不修改密码
              this.http.post('/update-admin', {
                name: this.selfForm.name,
                head: this.selfForm.headImg
              }, data => {
                this.$Message.success('更新成功!');
              }, error => {
                this.$Message.error(error);
              });
            }
          } else {
            this.$Message.error('请检查您的输入');
          }
        })
      },
      handleReset(name) {
        this.$refs[name].resetFields();
        this.selfForm.oldPwd = '';
        this.selfForm.newPwd = '';
      },
      switchChange(state) {
        this.showSettingPwd = state;
      },
      uploadSuccess(url) {
        this.selfForm.headImg = url;
        //上传我的头像
        this.http.post('/update-admin', {
          name: this.selfForm.name,
          head: this.selfForm.headImg
        }, data => {
          this.$Message.success('更新头像成功!');
        }, error => {
          this.$Message.error(error);
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    width: 30%
    margin: 10px
    .setting-head
      *
        margin: 5px
    .headImg
      max-height: 100px
</style>
